<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
	</head>

	<body>
		<script src="js/mui.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
		<div class="mui-content">
			<button type="button" class="mui-btn" id="bt1">打开新页面</button>
			<button type="button" class="mui-btn mui-btn-primary mui-action-back">蓝色</button>
			<button type="button" class="mui-btn mui-btn-success">绿色</button>
			<button type="button" class="mui-btn mui-btn-warning">黄色</button>
			<button type="button" class="mui-btn mui-btn-danger">红色</button>
			<button type="button" class="mui-btn mui-btn-royal">紫色</button> 
		</div>
		<script>
		var bt1=document.getElementById("bt1");
		bt1.onclick=function(){
			mui.openWindow({
			    url:"newPage.html",
			    id:"newPage",
			    styles:{
			      top:"44px",//新页面顶部位置
			      bottom:"50px",//新页面底部位置
			      // width:newpage-width,//新页面宽度，默认为100%
			      // height:newpage-height,//新页面高度，默认为100%
			    
			    },
			    extras:{
			      //自定义扩展参数，可以用来处理页面间传值
				  name:"tom"
			    },
			    createNew:false,//是否重复创建同样id的webview，默认为false:不重复创建，直接显示
			    show:{
			      autoShow:false,//页面loaded事件发生后自动显示，默认为true
			      aniShow:"zoom-fade-out",//页面显示动画，默认为”slide-in-right“；
			      duration:2000//页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；
			    },
			    waiting:{
			      autoShow:true,//自动显示等待框，默认为true
			      title:'加载中...',//等待对话框上显示的提示内容
			      options:{
			        // width:"500px",//等待框背景区域宽度，默认根据内容自动计算合适宽度
			        // height:"500px",//等待框背景区域高度，默认根据内容自动计算合适高度			        
			      }
			    }
			})
		}
		
		</script>
	</body>

</html>
